<!-- 秒杀 -->
<template>
  <div class="miaosha">
    <div class="title">
      <div class="img">
       <img
          src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978468241.png?imageView2/2/format/webp"
          alt=""
        />
      </div>
      <div class="ms">
        <span>{{hour}}</span>
        <span>{{mins}}</span>
        <span>{{sec}}</span>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      hour: "00",
      mins: "00",
      sec: "00",
      timer: null,
    };
  },
  methods: {
    miaosha() {
      //秒杀流程
      //1、设置目标时间 targetTime
      //2、获取电脑当前时间 nowTime
      //3、计算时间差targetTime-nowTime
      var nowTime = new Date();
      var targetTime = new Date("2021-04-05 18:00:00");
      var oTime = (targetTime - nowTime) / 1000; //时间差秒

      //算出小时
      this.hour = Math.floor(oTime / 3600);
      if (this.hour <= 9 && this.hour >= 0) {
        this.hour = "0" + this.hour;
      }
      if (this.hour < 0) {
        this.hour = "00";
      }
      //算出分钟
      this.mins = Math.floor((oTime % 3600) / 60);
      if (this.mins <= 9 && this.mins >= 0) {
        this.mins = "0" + this.mins;
      }
      if (this.mins < 0) {
        this.mins = "00";
      }
      //算出秒钟
      this.sec = Math.floor(oTime % 60);
      if (this.sec <= 9 && this.sec >= 0) {
        this.sec = "0" + this.sec;
      }
      if (this.sec < 0) {
        this.sec = "00";
      }
    },
  },
  mounted() {
    this.timer = setInterval(this.miaosha, 1000);
  },
};
</script>
<style lang="less">
.miaosha {
  .title {
    width: 100%;
    height: 4.4rem;
    // background: pink;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 10rem;
      height: 2rem;
    }
    .ms {
      span {
        width: 3rem;
        height: 2rem;
        background: #f55;
        color: #fff;
        display: inline-block;
        text-align: center;
        line-height: 2rem;
        margin-left: 1rem;
        border-radius: 0.5rem;
      }
    }
  }
}
</style>